<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>获取用户数据</button>
    <ul class="list">
        <li>英雄名称</li>
    </ul>
    <script>
        /**
         * 方法名：ajax
         * 参数1：路径
         * 参数2：数据
         * 参数3：回调函数
         * */
        let ajax = (url,callback) => {
            let x = new XMLHttpRequest();
            x.open('get', url);
            x.setRequestHeader('a',12);
            x.send();
            x.responseType = 'json';
            x.onreadystatechange = () => {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        console.log(x.getAllResponseHeaders());
                        callback(x.response);
                    }
                }
            }
        }

        let list = document.querySelector('.list');
        ajax('http://localhost/getHeros',(data)=>{
            let str = data.map(item => `<li>${item.name}</li>`).join('')
            list.innerHTML = str;
        });


        let btn = document.querySelector('button')

        btn.onclick = function () {
            ajax('http://localhost/jsonServer',(data)=>{
                console.log(data);
            })
        }

        // 1. 声明ajax函数，声明三个形参
        // 2. 声明xhr对象
        // 3. 打开请求
        // 4. 设置请求头（可选）
        // 5. 将参数2数据解析成 表单格式数据 key=val&key=val
        // 6. 发送请求
        // 7. 设置响应数据类型
        // 8. 监听xhr对象就绪状态
            // 9. 判断状态码
            // 10. 执行回调（传入响应数据）
    </script>
</body>

</html>